Introduction

You previously learned that UI elements in a React Native app often need to retain data, which then causes them to respond or render differently. For example, if a user enables functionality in an app to disable push notifications, it would need to stay this way the next time the user opens the app.

Because you’ll use many of these elements in your project, let’s recap some common elements and how you can store data in them.

Onboarding UI Elements

There are several built-in components in React Native that you can use to design an onboarding flow. Some of the components that you might find useful include:

• View : This basic container element can be used to hold other components and apply styles such as padding, margin, and background color.

• Text : This simple text element can be used to display text in your onboarding flow to explain a specific feature.

• TextInput : A foundational component for inputting text into the app via a keyboard.

• Image : This component allows you to display images that support your text, providing more contextual information about a specific feature you want to highlight or convey extra information with visual cues.

• Button : This component allows you to create buttons that users can tap to perform an action. You can use buttons to enable users to navigate your onboarding flow or perform other actions.

There are other interesting components which are a good fit for the onboarding flow, however they are not part of the React Native core library. Let’s highlight some of them:

Progress Bar: This UI element is an indicator used to present the progress of some activity in the app, like how far users are within the onboarding flow. Multiple UI libraries offer this component already implemented, like the React Native Paper ProgressBar component

View Pager: The Expo ViewPager library exposes a component that provides the layout and gestures to scroll between pages of content, like a carousel . It’s one of the best options to lay out and navigate smoothly between the different pages of the onboarding flow. In the image below depicting an example application of the ViewPager , notice the three pagination dots, with one highlighted differently to indicate its status as the current page.

Overall, the best components will depend on your onboarding flow’s specific needs and the content you want to include. It may be helpful to experiment with different components to see which ones work best for your needs.

For more information about UI components, please review the following video items from the React Native course:

• Using the View and Text components , in Module 1, Lesson 4.

• Practical Styling , in Module 1, Lesson 5.

• What is the TextInput component? in Module 2, Lesson 3.

Storing Data

While most of the application data stays in memory, you will need to persist certain pieces of information that are key to keeping track of specific user actions, especially after the user has closed the application.

React Native offers different ways to store data on disk. The most suitable option for simple data independent of other values is utilizing the AsyncStorage library.

For example, to persist a value that indicates whether the user has completed onboarding or not, you can leverage the setItem function.

For more information about storing data in AsyncStorage , please review the video Working with AsyncStorage in Module 4, Lesson 1 of the course Working with data in React Native.

Conclusion

In this reading, you explored the different UI components React Native offers to implement an onboarding flow. You also reviewed how to persist simple data on disk with the AsyncStorage library.